<template>
  <el-dialog
    :title="dialogObj.title"
    append-to-body
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false"
    width="700px"
    class="abow_dialog"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      :rules="rules"
      :disabled="dialogObj.read"
      v-if="dialogObj.title === '编辑栏目'"
    >
       <el-form-item label="主题名称："  prop="label">
        <el-input
          v-model="form.subjectName"
          style="width:200px;"
          size="mini"
          disabled
          placeholder="请输入主题名称"
        ></el-input>
      </el-form-item>

     <el-form-item label="栏目名："  prop="label">
        <el-input
          v-model="form.label"
          style="width:200px;"
          size="mini"
          placeholder="请输入栏目名"
        ></el-input>
      </el-form-item>
      <el-form-item label="栏目描述：" prop="description">
        <el-input
          v-model="form.description"
          style="width:200px;"
          size="mini"
          placeholder="请输入栏目描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="关键词："  prop="keywords">
        <el-input
          v-model="form.keywords"
          style="width:200px;"
          size="mini"
          placeholder="请输入关键词"
        ></el-input>
      </el-form-item>
        <el-form-item label="是否爬取：" prop="isCrawl">
        <el-select
          v-model="form.isCrawl"
          placeholder="请选择"
          style="width:200px;"
          size="mini"
        >
          <el-option
            v-for="data in isCrawlData"
            :key="data.id"
            :label="data.value"
            :value="data.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
      <el-form
      ref="form"
      :model="areaForm"
      label-width="120px"
      :rules="rules"
      :disabled="dialogObj.read"
      v-else
    >
       <el-form-item label="爬取范围："  prop="scope">
        <el-select
          v-model="areaForm.scope"
          placeholder="请选择"
          style="width:200px;"
          size="mini"
        >
          <el-option
            v-for="data in crawlerArea"
            :key="data.id"
            :label="data.value"
            :value="data.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="爬取条数："  prop="start">
          <el-input
                v-model="areaForm.start"
                style="width:200px;"
                size="mini"
                maxlength="20"
                placeholder="请输入爬取条数"
              ></el-input>
         </el-form-item>
      </el-form>
    <div class="operate-footer" v-if="!dialogObj.view">
      <el-button type="primary" @click="sub" size="mini">确 定</el-button>
      <el-button @click="dialogObj.show = false" size="mini">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { _debounce } from "@u/debounce";
import _ from "lodash";
import {
  getUpdateListApi,
  getAreaListApi
} from "@s/api";
import {
  CRAWLERAREA,
  REPTILEISCRAWLARRAY
} from "@u/wordbook";
export default {
  name: "dialogCom",
  props: ["dialogObj"],
  data() {
    return {
      crawlerArea:CRAWLERAREA,
      isCrawlData:REPTILEISCRAWLARRAY,
      form: {
        id:'',
        isCrawl: "",
        description: "",
        keywords: "",
        label:"",
        subjectName: ""
      },
      areaForm: {
        scope: '',
        start: 1
      },
        rules: {
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
         isCrawl: [
          { required: true, message: "请选择是否爬取", trigger: "blur" },
        ],
         keywords: [
          { required: true, message: "请输入关键词", trigger: "blur" },
        ],
         label: [
          { required: true, message: "请输入栏目名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    init() {
      if (this.dialogObj.id) {
        this.form.id = this.dialogObj.id;
        this.form.description = this.dialogObj.form.description;
        this.form.keywords = this.dialogObj.form.keywords;
        this.form.label = this.dialogObj.form.label;
        this.form.isCrawl = this.dialogObj.form.isCrawl;
        this.form.subjectName = this.dialogObj.form.subjectName
      }
    },
    editSub() {
      let json = {
        id:this.form.id,
        description: this.form.description,
        keywords: this.form.keywords,
        label: this.form.label,
        isCrawl:this.form.isCrawl
      };
      let areaJson = this.areaForm
      areaJson.channelId = this.form.id
      if(this.dialogObj.title === '编辑栏目'){
  getUpdateListApi(json).then(() => {
          this.dialogObj.show = false;
          this.$emit("reflash");
          this.$message({
            type: "success",
            message: "编辑栏目成功！",
          });
        });
      }else {
        getAreaListApi(areaJson).then(() => {
          this.dialogObj.show = false;
          this.$emit("reflash");
          this.$message({
            type: "success",
            message: "数据爬取中......",
          });
          this.areaForm.scope = ''
          this.areaForm.start = 1
        });
      }
      
    },
    sub: _debounce(function() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.editSub();
        }
      });
    }),
  },
  watch: {
    "dialogObj.show"(val) {
      if (val) {
        this.init();
      }
    },
  },
};
</script>
<style scoped lang="scss">
.operate-footer {
  text-align: center;
}
</style>
